<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./1.css">
<script src="echarts.js"></script>
</head>
<body>
    <div class="box">
        <div class="box1">
            <div class="box1-1">UNI-ADMIN</div>
            <div class="box1-2">
                <ul>
                    <li class="li1">首页</li>
                    <li class="li1">商品</li>
                    <li class="li1">订单</li>
                    <li class="li1">会员</li>
                    <li class="li1">设置</li>
                    <li class="li1">测试</li>
                </ul>
            </div>
        </div>
        <div class="box2">
            <div class="box2-1">
                <ul>
                    <li class="li2">后台首页</li>
                    <li class="li2">相册管理</li>
                    <li class="li2">商品列表</li>
                </ul>
            </div>
            <div class="box2-2">
                <div class="top">
                    <div class="top-1">
                         <div class="top-item">
                            <img src="./logo.82b9c7a5.png" alt="">
                            <div>
                                <h3>30</h3>
                                <p>关注人数（个）</p>
                            </div>
                         </div>
                    </div>
                    <div class="top-1">
                        <div class="top-item">
                            <img src="./logo.82b9c7a5.png" alt="">
                            <div>
                                <h3>30</h3>
                                <p>关注人数（个）</p>
                            </div>
                         </div>
                    </div>
                    <div class="top-1">
                        <div class="top-item">
                            <img src="./logo.82b9c7a5.png" alt="">
                            <div>
                                <h3>30</h3>
                                <p>关注人数（个）</p>
                            </div>
                         </div>
                    </div>
                    <div class="top-1">
                        <div class="top-item">
                            <img src="./logo.82b9c7a5.png" alt="">
                            <div>
                                <h3>30</h3>
                                <p>关注人数（个）</p>
                            </div>
                         </div>
                    </div>
                </div>
                <div class="main">
                    <div class="main-1">
                        <div class="main-item1">
                            <p class="main-box1">
                                &emsp;&emsp;
                                店铺及商品提示
                                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                                <a href="#">需要关注的店铺信息及待处理事项</a>
                            </p>
                            <div class="main-item2">
                                <div class="main-box2">
                                    <h1>60</h1>
                                    <p>出售中</p>
                                </div>
                                <div class="main-box2">
                                    <h1>60</h1>
                                    <p>出售中</p>
                                </div>
                                <div class="main-box2">
                                    <h1>60</h1>
                                    <p>出售中</p>
                                </div>
                                <div class="main-box2">
                                    <h1>60</h1>
                                    <p>出售中</p>
                                </div>
                            </div>
                        </div>
                        <div class="main-item1 q1">
                           <div>
                            <p class="main-box1">
                                &emsp;&emsp;
                                店铺及商品提示
                                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                                <a href="#">需要关注的店铺信息及待处理事项</a>
                            </p>
                           </div>
                            <div class="main-item2">
                                <div class="main-box2">
                                    <h1>60</h1>
                                    <p>出售中</p>
                                </div>
                                <div class="main-box2">
                                    <h1>60</h1>
                                    <p>出售中</p>
                                </div>
                                <div class="main-box2">
                                    <h1>60</h1>
                                    <p>出售中</p>
                                </div>
                                <div class="main-box2">
                                    <h1>60</h1>
                                    <p>出售中</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main-1">
                        <div id="main" style="width: 600px;height:400px;"></div>
                    </div>
                    <div class="main-1">
                        <p class="main-box1">
                            &emsp;&emsp;
                            销售情况统计
                            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                            <a href="#">按周期统计商家店铺的订单量和订单金额</a>
                        </p>
                        <div class="main-box3">
                            <div class="main-q1">
                                <div class="main-w1">
                                    昨日销量
                                </div>
                                <div class="main-w2">
                                    <p>订单金额（元） 12</p>
                                    <p class="e1">订单量（件） 12</p>
                                </div>
                            </div>
                            <div class="main-q1">
                                <div class="main-w1">
                                    昨日销量
                                </div>
                                <div class="main-w2">
                                    <p>订单金额（元） 12</p>
                                    <p class="e1">订单量（件） 12</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main-1">
                        <p class="main-box1">
                            &emsp;&emsp;
                            单品销售排名
                            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                            <a href="#">按周期统计商家店铺的订单量和订单金额</a>
                        </p>
                        <div class="main-box4">
                            <div class="main-w3">
                                <table border="1" width="500px" cellspacing="0">
                                    <tr>
                                        <th>#</th>
                                        <th class="q3">商品信息</th>
                                        <th>销量</th>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td class="q3">小天鹅（小天鹅）滚筒洗衣机...</td>
                                        <td>9</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td class="q3">小天鹅（小天鹅）滚筒洗衣机...</td>
                                        <td>9</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td class="q3">小天鹅（小天鹅）滚筒洗衣机...</td>
                                        <td>9</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    // text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['邮件营销', '联盟广告', '视频广告', '直接服务', '搜索引擎']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '邮件营销',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接服务',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

option && myChart.setOption(option);
</script>
</html>